import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Card, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

export default function Login() {
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();

  // 页面加载时清除可能存在的旧登录信息
  useEffect(() => {
    localStorage.removeItem('token');
    localStorage.removeItem('userInfo');
  }, []);

  const onFinish = async (values) => {
    setLoading(true);
    try {
      // 这里应该调用真实的登录接口
      // const response = await loginApi(values);
      
      // 模拟登录成功
      setTimeout(() => {
        if (values.username === 'admin' && values.password === 'admin') {
          message.success('登录成功！');
          localStorage.setItem('token', 'mock-token');
          localStorage.setItem('userInfo', JSON.stringify({ username: values.username }));
          navigate('/dashboard');
        } else {
          message.error('用户名或密码错误！');
        }
        setLoading(false);
      }, 1000);
    } catch (error) {
      message.error('登录失败，请重试！');
      setLoading(false);
    }
  };

  return (
    <div style={{ 
      height: '100vh', 
      display: 'flex', 
      justifyContent: 'center', 
      alignItems: 'center',
      background: 'linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #667eea 100%)',
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* 背景装饰元素 */}
      <div style={{
        position: 'absolute',
        top: '10%',
        left: '10%',
        width: '300px',
        height: '300px',
        background: 'radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%)',
        borderRadius: '50%',
        animation: 'float 6s ease-in-out infinite'
      }}></div>
      <div style={{
        position: 'absolute',
        bottom: '15%',
        right: '15%',
        width: '250px',
        height: '250px',
        background: 'radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%)',
        borderRadius: '50%',
        animation: 'float 8s ease-in-out infinite reverse'
      }}></div>
      <div style={{
        position: 'absolute',
        top: '50%',
        left: '5%',
        width: '180px',
        height: '180px',
        background: 'radial-gradient(circle, rgba(255,255,255,0.18) 0%, transparent 70%)',
        borderRadius: '50%',
        animation: 'float 7s ease-in-out infinite'
      }}></div>
      
      {/* 金融图表装饰 */}
      <div style={{
        position: 'absolute',
        top: '20%',
        right: '20%',
        width: '200px',
        height: '120px',
        border: '3px solid rgba(255,255,255,0.25)',
        borderBottom: 'none',
        borderRight: 'none'
      }}>
        <div style={{
          position: 'absolute',
          bottom: '0',
          left: '0',
          width: '100%',
          height: '60%',
          background: 'linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 100%)',
          clipPath: 'polygon(0 100%, 20% 40%, 40% 80%, 60% 20%, 80% 60%, 100% 0, 100% 100%)'
        }}></div>
      </div>
      
      <div style={{
        position: 'absolute',
        bottom: '25%',
        left: '20%',
        width: '160px',
        height: '100px',
        border: '3px solid rgba(255,255,255,0.25)',
        borderBottom: 'none',
        borderRight: 'none'
      }}>
        <div style={{
          position: 'absolute',
          bottom: '0',
          left: '0',
          width: '100%',
          height: '70%',
          background: 'linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%)',
          clipPath: 'polygon(0 100%, 25% 30%, 50% 70%, 75% 10%, 100% 50%, 100% 100%)'
        }}></div>
      </div>

      {/* 货币符号装饰 */}
      <div style={{
        position: 'absolute',
        top: '15%',
        left: '5%',
        fontSize: '48px',
        color: 'rgba(255,255,255,0.35)',
        fontWeight: 'bold',
        animation: 'float 5s ease-in-out infinite'
      }}>¥</div>
      
      <div style={{
        position: 'absolute',
        top: '35%',
        right: '8%',
        fontSize: '40px',
        color: 'rgba(255,255,255,0.3)',
        fontWeight: 'bold',
        animation: 'float 7s ease-in-out infinite reverse'
      }}>$</div>
      
      <div style={{
        position: 'absolute',
        bottom: '20%',
        right: '5%',
        fontSize: '36px',
        color: 'rgba(255,255,255,0.25)',
        fontWeight: 'bold',
        animation: 'float 6s ease-in-out infinite'
      }}>€</div>

      {/* 趋势线装饰 */}
      <div style={{
        position: 'absolute',
        top: '60%',
        left: '15%',
        width: '140px',
        height: '70px',
        border: '2px solid rgba(255,255,255,0.25)',
        borderBottom: 'none',
        borderRight: 'none'
      }}>
        <div style={{
          position: 'absolute',
          bottom: '0',
          left: '0',
          width: '100%',
          height: '100%',
          background: 'linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%)',
          clipPath: 'polygon(0 100%, 30% 60%, 60% 80%, 100% 20%, 100% 100%)'
        }}></div>
      </div>

      {/* 圆形图表装饰 */}
      <div style={{
        position: 'absolute',
        top: '70%',
        right: '25%',
        width: '100px',
        height: '100px',
        borderRadius: '50%',
        border: '3px solid rgba(255,255,255,0.25)',
        background: 'conic-gradient(from 0deg, rgba(255,255,255,0.25) 0deg, rgba(255,255,255,0.15) 120deg, transparent 120deg, transparent 360deg)',
        animation: 'float 8s ease-in-out infinite reverse'
      }}></div>

      {/* 柱状图装饰 */}
      <div style={{
        position: 'absolute',
        top: '25%',
        left: '25%',
        display: 'flex',
        alignItems: 'end',
        gap: '8px',
        height: '80px'
      }}>
        <div style={{
          width: '12px',
          height: '50px',
          background: 'rgba(255,255,255,0.2)',
          borderRadius: '4px'
        }}></div>
        <div style={{
          width: '12px',
          height: '70px',
          background: 'rgba(255,255,255,0.25)',
          borderRadius: '4px'
        }}></div>
        <div style={{
          width: '12px',
          height: '40px',
          background: 'rgba(255,255,255,0.18)',
          borderRadius: '4px'
        }}></div>
        <div style={{
          width: '12px',
          height: '65px',
          background: 'rgba(255,255,255,0.22)',
          borderRadius: '4px'
        }}></div>
        <div style={{
          width: '12px',
          height: '55px',
          background: 'rgba(255,255,255,0.2)',
          borderRadius: '4px'
        }}></div>
      </div>

      {/* 网格装饰 */}
      <div style={{
        position: 'absolute',
        bottom: '10%',
        left: '10%',
        width: '160px',
        height: '100px',
        background: `
          linear-gradient(rgba(255,255,255,0.15) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255,255,255,0.15) 1px, transparent 1px)
        `,
        backgroundSize: '30px 30px',
        opacity: 0.6,
        animation: 'float 9s ease-in-out infinite'
      }}></div>

      {/* 百分比符号 */}
      <div style={{
        position: 'absolute',
        top: '45%',
        left: '8%',
        fontSize: '32px',
        color: 'rgba(255,255,255,0.25)',
        fontWeight: 'bold',
        animation: 'float 6s ease-in-out infinite reverse'
      }}>%</div>

      {/* 上升箭头 */}
      <div style={{
        position: 'absolute',
        bottom: '35%',
        left: '35%',
        fontSize: '36px',
        color: 'rgba(255,255,255,0.3)',
        transform: 'rotate(-45deg)',
        animation: 'float 7s ease-in-out infinite'
      }}>↗</div>

      {/* 下降箭头 */}
      <div style={{
        position: 'absolute',
        top: '30%',
        left: '40%',
        fontSize: '32px',
        color: 'rgba(255,255,255,0.2)',
        transform: 'rotate(45deg)',
        animation: 'float 8s ease-in-out infinite reverse'
      }}>↘</div>

      <Card style={{ 
        width: 400, 
        boxShadow: '0 8px 32px rgba(0,0,0,0.3)',
        backdropFilter: 'blur(10px)',
        background: 'rgba(255, 255, 255, 0.95)',
        border: '1px solid rgba(255, 255, 255, 0.2)',
        borderRadius: '16px'
      }}>
        <div style={{ textAlign: 'center', marginBottom: 24 }}>
          <div style={{
            fontSize: '32px',
            fontWeight: 'bold',
            background: 'linear-gradient(135deg, #1e3c72 0%, #667eea 100%)',
            WebkitBackgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            marginBottom: '8px'
          }}>
            智能投顾系统
          </div>
          <p style={{ color: '#666', fontSize: '14px' }}>专业的投资顾问服务平台</p>
        </div>
        
        <Form
          name="login"
          onFinish={onFinish}
          autoComplete="off"
          size="large"
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入用户名!' }]}
          >
            <Input 
              prefix={<UserOutlined style={{ color: '#1e3c72' }} />} 
              placeholder="请输入用户名" 
              style={{
                height: '48px',
                borderRadius: '8px',
                border: '1px solid #d9d9d9',
                fontSize: '16px'
              }}
            />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input.Password
              prefix={<LockOutlined style={{ color: '#1e3c72' }} />}
              placeholder="请输入密码"
              style={{
                height: '48px',
                borderRadius: '8px',
                border: '1px solid #d9d9d9',
                fontSize: '16px'
              }}
            />
          </Form.Item>

          <Form.Item>
            <Button 
              type="primary" 
              htmlType="submit" 
              loading={loading}
              style={{ 
                width: '100%',
                height: '48px',
                borderRadius: '8px',
                fontSize: '16px',
                fontWeight: 'bold',
                background: 'linear-gradient(135deg, #1e3c72 0%, #667eea 100%)',
                border: 'none',
                boxShadow: '0 4px 12px rgba(30, 60, 114, 0.3)'
              }}
            >
              登录系统
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
} 